<template>
	<view>
		<type-tabs v-model="tabIndex" :fixed="true" :tabs="tabs" @change="tabChange"></type-tabs>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<view style="margin-top: 100rpx;">
				<view class="p-section" v-for="(item, index) in members" :key="index">
					<view class="f-section">
						<view class="basis-df">
							<text>昵称</text>
							<text class="info">{{ item.nick | userNick }}</text>
						</view>
						<view class="basis-df">
							<text>加入时间</text>
							<text class="info">{{ item.createTime | formatShortDate }}</text>
						</view>
					</view>
					<view class="s-section">
						<text>微信号</text>
						<text class="info">{{ item.wechat }}</text>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import typeTabs from '@/components/type-tabs.vue';

import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
var _self; //this容器
export default {
	mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
	components: {
		typeTabs
	},
	data() {
		return {
			upOption: {
				empty: {
					use: true, // 是否显示空布局
					icon: '/static/desc/noneteam.png',
					tip: ''
				}
			},
			tabs: [
				{ name: '大掌柜', apiUrl: 'user/firstUser', members: null, num: 1, y: 0, curPageLen: 0, hasNext: true },
				{ name: '二掌柜', apiUrl: 'user/secondUser', members: null, num: 1, y: 0, curPageLen: 0, hasNext: true }
			],
			tabIndex: 0, // 当前菜单下标
			preIndex: 0, // 前一个菜单下标
			totalPage: 0 //总页数
		};
	},
	onLoad(options) {
		_self = this;
		_self.loadData();
	},
	computed: {
		// 列表数据
		members() {
			return this.tabs[this.tabIndex].members;
		}
	},
	methods: {
		async loadData() {
			//初始化大掌柜和二掌柜的数量
			let fsum = await _self.getSumFromNet(0);
			let ssum = await _self.getSumFromNet(1);
			_self.tabs[0].name = `大掌柜（${fsum}）`;
			_self.tabs[1].name = `二掌柜（${ssum}）`;
		},

		/*下拉刷新的回调 */
		downCallback() {
			_self.mescroll.resetUpScroll();
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			//联网加载数据
			if (_self.isChangeTab) {
				_self.mescroll.showUpScroll();
			}
			_self
				.getListDataFromNet(page.num, page.size)
				.then(curPageData => {
					let curTab = _self.tabs[_self.tabIndex];
					if (page.num == 1) curTab.members = []; //如果是第一页需手动制空列表
					curTab.members = curTab.members.concat(curPageData); //追加新数据
					_self.mescroll.endByPage(curPageData.length, _self.totalPage);
					_self.$nextTick(() => {
						curTab.num = page.num; // 页码
						curTab.curPageLen = curPageData.length; // 当前页长
						curTab.hasNext = _self.mescroll.optUp.hasNext; // 是否还有下一页
						if (_self.isChangeTab) {
							_self.isChangeTab = false;
							_self.mescroll.hideUpScroll();
						}
					});
				})
				.catch(() => {
					//联网失败, 结束加载
					_self.mescroll.endErr();
				});
		},

		/* 获取查询数据 */
		getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
			try {
				const param = {
					currentPage: pageNum,
					pageSize: pageSize
				};
				let apiUrl = _self.tabs[_self.tabIndex].apiUrl;
				let promise = new Promise(function(resolve, reject) {
					_self.$http.httpRequest(apiUrl, param, true).then(res => {
						if (res._tranStatus) {
							_self.totalPage = res._data.totalPage;
							resolve(res._data.pageItems);
						}
					});
				});
				return promise;
			} catch (e) {
				return Promise.reject(e);
			}
		},

		/* 获取查询数据 */
		getSumFromNet(type) {
			try {
				const param = {
					currentPage: 1,
					pageSize: 10
				};
				let apiUrl = _self.tabs[type].apiUrl;
				let promise = new Promise(function(resolve, reject) {
					_self.$http.httpRequest(apiUrl, param, true).then(res => {
						if (res._tranStatus) {
							resolve(res._data.totalCount);
						}
					});
				});
				return promise;
			} catch (e) {
				return Promise.reject(e);
			}
		},

		// 切换菜单
		tabChange(index) {
			// 记录前一个菜单的数据
			let preTab = _self.tabs[_self.preIndex];
			preTab.y = _self.mescroll.getScrollTop(); // 滚动条位置
			_self.preIndex = index;
			// 当前菜单的数据
			let curTab = _self.tabs[index];
			if (!curTab.members) {
				// 没有初始化,则初始化
				_self.isChangeTab = true;
				_self.mescroll.resetUpScroll();
			} else {
				// 初始化过,则恢复之前的列表数据
				_self.mescroll.setPageNum(curTab.num + 1); // 恢复当前页码
				_self.mescroll.endSuccess(curTab.curPageLen, curTab.hasNext); // 恢复是否有下一页或显示空布局
				_self.$nextTick(() => {
					_self.mescroll.scrollTo(curTab.y, 0); // 恢复滚动条的位置
				});
			}
		}
	},
	filters: {
		userNick: function(nick) {
			return nick ? nick : '木有昵称';
		}
	}
};
</script>

<style lang="scss">
.p-section {
	margin: 10rpx;
	background-color: white;
	color: #000000;
	border-radius: 10rpx;
	padding: 20rpx;
	.f-section {
		display: flex;
		flex-wrap: wrap;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.s-section {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}
	.info {
		color: #aaaaaa;
		font-size: 24rpx;
		padding-left: 20rpx;
	}
}
</style>
